<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <button onclick="doAjax()">$.ajxa()</button>
    <button onclick="doAjaxGet()">$.get()</button>
    <button onclick="doAjaxGetJson()">$.getJson()</button>
    <button onclick="doAjaxPost()">$.post()</button>
    <button>$.loading()</button>
    <div id="result"></div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script>
    function doAjax() {
        let url = "http://localhost:8080/doAjax";
        let params = "msg=hello jquery ajax";
        $.ajax({
            url:url,
            data:params,
            success:function (result) {
                $("#result").html(result);
            }
        });
    }
    function doAjaxGet(){
        let url = "http://localhost:8080/doGet";
        let params="";
        $.get(url,params,function(result){
            console.log(result);
        });
    }
    function doAjaxGetJson(){
        let url = "http://localhost:8080/doGet";
        let params="";
        $.getJSON(url,params,function(result){
            console.log(result);
        },"Json");
    }
    function doAjaxPost(){
        let url = "http://localhost:8080/doPost";
        let params = {"id":2,"name":"human","state":"ok"};
        $.ajax({
            type:"POST",
            date:JSON.stringify(params),
            url:url,
            async:true,
            contentType:"application/json;charset=UTF-8",
            success:function(result){
                console.log(params);
                $("#result").html(result);
            },
            error:function(){
                $("#result").html("error");
            }
        });
        // $.post(url,params,function (result){
        //     console.log(result);
        //     }
        // );
    }
</script>
</html>